import React from 'react';
import { inject, observer } from 'mobx-react';
import { Popover, InputNumber } from 'antd';
import { WeaCheckbox } from 'ecCom';

@inject('portalLoginStore')
@observer
class E9BgImageBox extends React.Component {
    render() {
        const { portalLoginStore } = this.props;
        const { labelObj, state, setStateAndCache, onBgImageChange } = portalLoginStore;
        const { bgImagesInfo = [], initialSlide, autoCarousel, carouselTime } = state;
        let _carouselTime = carouselTime;
        if (carouselTime == undefined) {
            _carouselTime = 1;
        }
        const content = (
            <div className="e9login-bg-image-box-content">
                <div className="e9login-bg-image-box-toolbar">
                    <div className="e9login-bg-image-box-title">{labelObj.djqhbj}</div>
                    <div className="e9login-bg-image-box-item">
                        <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@r571v0`} value={autoCarousel} content={labelObj.zdlb} onChange={() => setStateAndCache('autoCarousel', !autoCarousel)} />
                    </div>
                    <div className="e9login-bg-image-box-item">
                        <div className="e9login-bg-image-box-label">{labelObj.lbsd}</div>
                        <InputNumber ecId={`${this && this.props && this.props.ecId || ''}_InputNumber@4vacla`} value={_carouselTime} min={0} disabled={!autoCarousel} style={{ width: '70px', marginTop: '-4px' }} onChange={value => setStateAndCache('carouselTime', value)} />
                    </div>
                </div>
                <div className="e9login-bg-image-box-images">
                    {
                        bgImagesInfo.map((item, index) => {
                            const selectedClassName = index == initialSlide ? 'e9login-bg-image-box-image-selected' : '';
                            return <img src={item.imgsrc} alt="" className={`e9login-bg-image-box-image ${selectedClassName}`} onClick={() => onBgImageChange(item, index)} />;
                        })
                    }
                </div>
            </div>
        );

        return (
            <Popover ecId={`${this && this.props && this.props.ecId || ''}_Popover@0sus3i`} trigger="click" placement="topLeft" content={content}>
                <div className="e9login-bg-image-box-btn" title={labelObj.backgroundtitle}>
                    <div className="e9login-bg-image-box-btn-background" />
                    <div className="e9login-bg-image-box-btn-icon">
                        <i className="wevicon-e9login-palette" />
                    </div>
                </div>
            </Popover>
        );
    }
}

export default E9BgImageBox;
